<!-- 成绩管理 -->
<template>
    <div class="app-container">
        <el-row>
            <el-col :span=24>
                <el-form ref="form" :model="form" label-width="80px" style="height: 100px; margin: 10px">
                    <el-row :gutter="16">
                        <el-col :span=4>
                            <el-form-item label="姓名">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=4>
                            <el-form-item label="身份证">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=4>
                            <el-form-item label="身份证">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=4>
                            <el-form-item label="部门">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="16">

                        <el-col :span=4>
                            <el-form-item label="题库">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=4>
                            <el-form-item label="试卷">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=4>
                            <el-form-item label="分数">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=4>
                            <el-form-item label="合格状态">
                                <el-input v-model="form.userName"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="12">
                        <el-col :span=4>
                            <el-form-item label="筛选时间">
                                <el-date-picker v-model="value2" type="daterange" align="center" unlink-panels
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                :picker-options="pickerOptions" >
                            </el-date-picker>
                            </el-form-item>
                            
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="2" :offset="20">
                <el-button type="primary" @click="searchTable(form)">搜索</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="emptySearch(form)">重置</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="姓名">
                    </el-table-column>
                    <el-table-column prop="name" label="身份证">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="" trigger="hover" :key='23232323' :ref="2323232">
                            <img :src="scope.row.qrCode" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.qrCode" style="width: 80px;height: 80px">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="头像">
                    </el-table-column>
                    <el-table-column prop="address" label="部门">
                    </el-table-column>
                    <el-table-column prop="address" label="参考试卷">
                    </el-table-column>
                    <el-table-column prop="address" label="所属题库">
                    </el-table-column>
                    <el-table-column prop="address" label="成绩">
                    </el-table-column>
                    <el-table-column prop="address" label="考试时间">
                    </el-table-column>
                    <el-table-column prop="address" label="是否合格">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <Pagination :pageNum="gather.pageNum" :total="total" :pageSize="gather.pageSize" @sizeChange="sizeChange"
            @currentChange="currentChange"></Pagination>
    </div>
</template>
<script>
import Pagination from '../../components/Pagination/pagination.vue'
export default ({
    components: { Pagination },
    data() {
        return {
            gather: {
                pageNum: 1,//默认第一页
                pageSize: 10,//一页展示10条
            },
            total: 0,
            form: {

            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: '',
            value2: ''
        }
    },
    methods: {
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.gather.pageNum = val;
            this.getFactoryListAsync(); //调用接口方法
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.gather.pageSize = val;
            this.getFactoryListAsync(); //调用接口方法
        },

    }
})
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>